<template>
  <div ref="charts" style="width: 220px; height: 195px;"></div>
</template>
 
<script>
 
export default {
  name: 'MyCharts',
  mounted() {
   //  this.initChart();
  },
  methods: {


    

    initChart(num,name) {
      // 获取DOM元素
      const chartDom = this.$refs.charts;
      
      // 初始化ECharts实例
      const myChart = this.$echarts.init(chartDom);
   //  const num = 15
   //  const name = '到货合格率'
      const startAngle = 240
      
const endAngle = -60
let option = {
//    backgroundColor: '#333',
   title: [
      {
         text: `{value|${num}%}\n{name|${name}}`,
         left: 'center',
         bottom: '42%',
         textStyle: {
            rich: {
               value: {
                  fontSize: '24',
                  color: '#ffffff',
                  padding: [8, 0]
               },
               name: {
                  fontSize: '14',
                  color: '#ffffff'
               }
            }
         }
      }
   ],
   series: [
      {
         name: '最外层-刻度尺',
         type: 'gauge',
         radius: '90%',
         startAngle,
         endAngle,
         axisLine: {
            lineStyle: {
               color: [[1, 'rgba(25, 235, 255, 1)']],
               width: 1
            }
         },
         axisTick: {
            distance: -6,
            length: 7,
            lineStyle: {
               color: 'rgba(25, 235, 255, 1)'
            },
            splitNumber: 10
         },
         splitLine: {
            distance: -11,
            length: 14,
            lineStyle: {
               color: 'rgba(25, 235, 255, 1)',
               width: 1
            }
         },
         axisLabel: {
            show: false
         },
         pointer: {
            show: false
         }
      },
      {
         name: '内层带指针',
         type: 'gauge',
         radius: '80%',
         startAngle,
         endAngle,
         axisLine: {
            lineStyle: {
               color: [[1, 'rgba(25, 235, 255, 0.2)']],
               width: 30
            }
         },
         axisTick: {
            show: false
         },
         splitLine: {
            show: false
         },
         axisLabel: {
            show: false
         },
         detail: {
            show: false
         },
         pointer: {
            show: true,
            length: '76%',
            offsetCenter: [0, '-24%'],
            width: 6,
            icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
            itemStyle: {
               color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                     {
                        offset: 0,
                        color: 'rgba(95, 233, 208, 1)'
                     },
                     {
                        offset: 1,
                        color: 'rgba(15, 89, 200, 0)'
                     }
                  ]
               }
            }
         },
         progress: {
            show: true,
            width: 30,
            itemStyle: {
               color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                     {
                        offset: 0,
                        color: 'rgba(15, 71, 183, 1)'
                     },
                     {
                        offset: 1,
                        color: 'rgba(15, 85, 193, 0)'
                     }
                  ]
               }
            }
         },
         data: [
            {
               value: num
            }
         ]
      },
      {
         name: '中心效果圆',
         type: 'gauge',
         radius: '44%',
         startAngle: 0,
         endAngle: 360,
         axisLine: {
            lineStyle: {
               color: [[1, '#000000']],
               width: 1
            }
         },
         axisTick: {
            show: false
         },
         splitLine: {
            show: false
         },
         axisLabel: {
            show: false
         },
         detail: {
            show: false
         },
         pointer: {
            show: false
         },
         progress: {
            show: true,
            width: 80,
            itemStyle: {
               color: {
                  type: 'radial',
                  x: 0.5,
                  y: 0.5,
                  r: 0.5,
                  colorStops: [
                     {
                        offset: 0,
                        color: 'rgb(0, 224, 205, 0)'
                     },
                     {
                        offset: 0.7,
                        color: 'rgba(0, 224, 205, 0)'
                     },
                     {
                        offset: 1,
                        color: 'rgba(10, 255, 233, 1)'
                     }
                  ]
               }
            }
         },
         data: [
            {
               value: 360
            }
         ]
      },
      {
         type: 'pie',
         radius: ['90%', '89.5%'],
         hoverAnimation: false,
         clockWise: false,
         itemStyle: {
               normal: {
                  color: 'rgba(5, 79, 123, 1)'
               }
         },
         label: {
               show: false
         },
         data: [360]
      }
   ]
}
 
      // 使用配置项显示图表
      myChart.setOption(option);
    }
  }
};
</script>